<template>
  <div class="gtkjgh">
    <div class="gtkjgh_top">
      <div class="gtkjgh_top_text">国土空间规划三区三线</div>
    </div>
    <div class="gtkjgh_middle">
      <!-- <div class="building_middle_title">影响建筑面积统计</div> -->
      <div class="gtkjgh_middle_button">
        <div class="gtkjgh_middle_button_content">
          <div class="gtkjgh_middle_button_content_top">
            <div class="gtkjgh_middle_button_title">永久基本农田</div>
            <el-switch
              v-model="switchValue1"
              active-color="#409EFF"
              inactive-color="#d1d1d1"
              :disabled="isdisabled"
              @change="switchChange1"
            >
            </el-switch>
          </div>
          <div
            class="gtkjgh_middle_button_image"
            :class="boxBlockItem == 0 ? 'image_active' : ''"
          >
            <div
              class="gtkjgh_middle_content"
              @click="box_blockClick(0)"
              v-if="parseFloat(gtkjghData.yjjbntRatio)"
              :style="{
                background:
                  boxBlockItem == 0
                    ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                    : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
              }"
            >
              <div class="gtkjgh_middle_content_top">
                选址涉及规划【永久基本农田】
              </div>
              <div class="gtkjgh_middle_content_bottom">
                <div class="gtkjgh_middle_content_bottom_one">
                  {{ gtkjghData.yjjbntHa.value }} 公顷 (合
                  {{ gtkjghData.yjjbntMu.value }} 亩)
                </div>
                <div class="gtkjgh_middle_content_bottom_two">
                  占比 {{ gtkjghData.yjjbntRatio }}%
                </div>
              </div>
            </div>
            <div v-else class="gtkjgh_middle_content">
              <div class="gtkjgh_middle_content_top">
                选址不涉及规划【永久基本农田】
              </div>
            </div>
          </div>
        </div>

        <div class="gtkjgh_middle_button_content">
          <div class="gtkjgh_middle_button_content_top">
            <div class="gtkjgh_middle_button_title">陆域生态保护红线</div>
            <el-switch
              v-model="switchValue2"
              active-color="#409EFF"
              inactive-color="#d1d1d1"
              :disabled="isdisabled"
              @change="switchChange2"
            >
            </el-switch>

            <div class="gtkjgh_middle_button_title" style="margin-left:35px">
              海洋生态保护红线
            </div>
            <el-switch
              v-model="switchValue4"
              active-color="#409EFF"
              inactive-color="#d1d1d1"
              :disabled="isdisabled"
              @change="switchChange4"
            >
            </el-switch>
          </div>
          <div
            class="gtkjgh_middle_button_image"
            :class="boxBlockItem == 1 ? 'image_active' : ''"
          >
            <div
              class="gtkjgh_middle_content"
              @click="box_blockClick(1)"
              v-if="parseFloat(gtkjghData.shtbhhxRatio)"
              :style="{
                background:
                  boxBlockItem == 1
                    ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                    : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
              }"
            >
              <div class="gtkjgh_middle_content_top">
                选址涉及规划【生态保护红线】
              </div>
              <div class="gtkjgh_middle_content_bottom">
                <div class="gtkjgh_middle_content_bottom_one">
                  {{ gtkjghData.shtbhhxHa.value }} 公顷 (合
                  {{ gtkjghData.shtbhhxMu.value }} 亩)
                </div>
                <div class="gtkjgh_middle_content_bottom_two">
                  占比 {{ gtkjghData.shtbhhxRatio }}%
                </div>
              </div>
            </div>
            <div v-else class="gtkjgh_middle_content">
              <div class="gtkjgh_middle_content_top">
                选址不涉及规划【生态保护红线】
              </div>
            </div>
          </div>
        </div>

        <div class="gtkjgh_middle_button_content">
          <div class="gtkjgh_middle_button_content_top">
            <div class="gtkjgh_middle_button_title">城镇开发边界</div>
            <el-switch
              v-model="switchValue3"
              active-color="#409EFF"
              inactive-color="#d1d1d1"
              @change="switchChange3"
              :disabled="isdisabled"
            >
            </el-switch>
          </div>
          <div
            class="gtkjgh_middle_button_image"
            :class="boxBlockItem == 2 ? 'image_active' : ''"
          >
            <div
              class="gtkjgh_middle_content"
              @click="box_blockClick(2)"
              v-if="parseFloat(gtkjghData.czhkfbjRatio)"
              :style="{
                background:
                  boxBlockItem == 2
                    ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                    : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
              }"
            >
              <div class="gtkjgh_middle_content_top">
                选址位于【城镇开发边界内的面积】
              </div>
              <div class="gtkjgh_middle_content_bottom">
                <div class="gtkjgh_middle_content_bottom_one">
                  {{ gtkjghData.czhkfbjHa.value }} 公顷 (合
                  {{ gtkjghData.czhkfbjMu.value }} 亩)
                </div>
                <div class="gtkjgh_middle_content_bottom_two">
                  <!-- 占比 {{ gtkjghData.czhkfbjRatio }}% -->
                  占比 {{ ( 100 - gtkjghData.yjjbntRatio - gtkjghData.shtbhhxRatio).toFixed(1) }}%
                </div>
              </div>
            </div>
            <div v-else class="gtkjgh_middle_content">
              <div class="gtkjgh_middle_content_top">
                选址不涉及规划【城镇开发边界内的面积】
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getXzRegion } from "../../../../../api/connect.js";
import guihuaTableNames from "../../left/guihuaTableNames.json";
import { editMap } from "../../../../../utils/map.js";

export default {
  data() {
    return {
      boxBlockItem: 0,

      //switch的值
      switchValue1: false, // 永久基本农田
      switchValue2: false, // 陆域生态保护红线
      switchValue3: false, // 城镇开发边界
      switchValue4: false, // 海洋生态保护红线

      isdisabled: false, //是否禁用

      // 图层的loading值
      // 国土空间规划三区三线(永久基本农田的loading)
      gtkjJbntLoading: false,
      // 国土空间规划三区三线(陆域生态保护红线的loading)
      gtkjLystLoading: false,
      // 国土空间规划三区三线(海洋生态保护红线的loading)
      gtkjHystLoading: false,
      // 国土空间规划三区三线(城镇开发边界的loading)
      gtkjCzkfLoading: false,
    };
  },
  computed: {
    ...mapState("Sjsx", ["gtkjghData", "isRegion"]),
  },
  mounted() {
    this.getAllZtghA();
    this.changeData();
  },
  methods: {
    ...mapActions({
      setGtkjJbntLoading_act: "Sjsx/setGtkjJbntLoading_act",
      setGtkjLystLoading_act: "Sjsx/setGtkjLystLoading_act",
      setGtkjHystLoading_act: "Sjsx/setGtkjHystLoading_act",
      setGtkjCzkfLoading_act: "Sjsx/setGtkjCzkfLoading_act",
    }),
    // 判断选中了哪个盒子
    box_blockClick(val) {
      this.boxBlockItem = val;
    },

    // 改变小数
    changeData() {
      // 占比判断一下，当为100时，不要小数点
      this.gtkjghData.yjjbntHa.value = this.gtkjghData.yjjbntHa.value.toFixed(
        3
      );
      this.gtkjghData.yjjbntMu.value = this.gtkjghData.yjjbntMu.value.toFixed(
        2
      );
      if (parseInt(this.gtkjghData.yjjbntRatio) == 100) {
        this.gtkjghData.yjjbntRatio = this.gtkjghData.yjjbntRatio.toFixed(0); // 占比判断一下
      } else {
        this.gtkjghData.yjjbntRatio = this.gtkjghData.yjjbntRatio.toFixed(1); // 占比判断一下
      }
      this.gtkjghData.shtbhhxHa.value = this.gtkjghData.shtbhhxHa.value.toFixed(
        3
      );
      this.gtkjghData.shtbhhxMu.value = this.gtkjghData.shtbhhxMu.value.toFixed(
        2
      );
      if (parseInt(this.gtkjghData.shtbhhxRatio) == 100) {
        this.gtkjghData.shtbhhxRatio = this.gtkjghData.shtbhhxRatio.toFixed(0); // 占比判断一下
      } else {
        this.gtkjghData.shtbhhxRatio = this.gtkjghData.shtbhhxRatio.toFixed(1); // 占比判断一下
      }
      this.gtkjghData.czhkfbjHa.value = this.gtkjghData.czhkfbjHa.value.toFixed(
        3
      );
      this.gtkjghData.czhkfbjMu.value = this.gtkjghData.czhkfbjMu.value.toFixed(
        2
      );
      if (parseInt(this.gtkjghData.czhkfbjRatio) == 100) {
        this.gtkjghData.czhkfbjRatio = this.gtkjghData.czhkfbjRatio.toFixed(0); // 占比判断一下
      } else {
        this.gtkjghData.czhkfbjRatio = this.gtkjghData.czhkfbjRatio.toFixed(1); // 占比判断一下
      }
    },

    // 计算国土空间规划三区三线
    getAllZtghA() {
      // console.log(this.tdlyztghAData,"关系表a的值");
      console.log(this.gtkjghData, "国土空间规划的值");
    },

    // 点击后画面 （永久基本农田）
    async getRegionDataOne() {
      try {
        const temp = guihuaTableNames.find(
          (r) => r.layer_chinese_name === "永久基本农田"
        );
        if (this.switchValue1 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];

          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色
              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            polygondata.push(o);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(
          //     itemJson.geometry.coordinates,
          //     "itemJson.geometry.coordinates"
          //   );

          //   let o = {
          //      id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1,1,1,0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });
          temp["polylinedata"] = polylinedata;
          temp["polygondata"] = polygondata;

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.gtkjJbntLoading = false;
          // this.$store.dispatch(
          //   "Sjsx/setGtkjJbntLoading_act",
          //   this.gtkjJbntLoading
          // );
          this.setGtkjJbntLoading_act(this.gtkjJbntLoading);

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue1 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue1 = false; // 请求失败后，将switch框设置为false
        this.gtkjJbntLoading = false;
        this.setGtkjJbntLoading_act(this.gtkjJbntLoading); // 请求失败后，将loading窗关闭
      }
    },

    // 点击后画面 （陆域生态保护红线）
    async getRegionDataTwo() {
      try {
        const temp = guihuaTableNames.find(
          (r) => r.layer_chinese_name === "陆域生态保护红线"
        );
        if (this.switchValue2 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];
          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色

              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            polygondata.push(o);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(
          //     itemJson.geometry.coordinates,
          //     "itemJson.geometry.coordinates"
          //   );
          //   // // 画线的
          //   // let o = {
          //   //   id: "polyline_" + temp.layer_english_name + "_" + index,
          //   //   color: [0, 0, 0, 1],
          //   //   coordinates: itemJson.geometry.coordinates[0],
          //   //   style: 5,
          //   //   thickness: 10,
          //   //   brightness: 0.8,
          //   //   flowRate: 0.5,
          //   //   depthTest: false,
          //   //   // shape:1
          //   // };
          //   let o = {
          //     id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1, 1, 1, 0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });

          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;

          // 调用一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.gtkjLystLoading = false;
          this.setGtkjLystLoading_act(this.gtkjLystLoading);
          // this.$store.dispatch(
          //   "Sjsx/setGtkjLystLoading_act",
          //   this.gtkjLystLoading
          // );

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue2 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue2 = false; // 请求失败后，将switch框设置为false
        this.gtkjLystLoading = false;
        this.setGtkjLystLoading_act(this.gtkjLystLoading); // 请求失败后，将loading窗关闭
      }
    },

    // 点击后画面 （海洋生态保护红线）
    async getRegionDataFour() {
      try {
        const temp = guihuaTableNames.find(
          (r) => r.layer_chinese_name === "海洋生态保护红线"
        );
        if (this.switchValue4 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polygondata = [];
          const polylinedata = [];
          result.data.map((item, index) => {
            let itemJson = JSON.parse(item);
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            let o = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色

              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            // if (this.XzTreeDataPolyon.indexOf(o.id) < 0) {
            //   this.XzTreeDataPolyon.push(o.id);
            // }
            polygondata.push(o);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
          });
          // const polygon3ddata = result.data.map((item, index) => {
          //   let itemJson = JSON.parse(item);
          //   console.log(
          //     itemJson.geometry.coordinates,
          //     "itemJson.geometry.coordinates"
          //   );

          //   let o = {
          //     id: "polygon3d_" + temp.layer_english_name + "_" + index,
          //     coordinates: itemJson.geometry.coordinates,
          //     color: [1, 1, 1, 0.5], //颜色值
          //     height: 150, //3D多边形的高度
          //     intensity: 2.0, //亮度
          //     style: 2,
          //   };
          //   return o;
          // });
          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;

          // 一次性画3000条数据的方法
          await editMap(polylinedata, 1);
          await editMap(polygondata, 2);

          this.gtkjHystLoading = false;
          this.setGtkjHystLoading_act(this.gtkjHystLoading);
          // this.$store.dispatch(
          //   "Sjsx/setGtkjCzkfLoading_act",
          //   this.gtkjHystLoading
          // );

          // await window.__g.polyline.add(polylinedata)
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue4 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue4 = false; // 请求失败后，将switch框设置为false
        // console.log(this.switchValue4, "switchValue4的值");
        this.gtkjHystLoading = false;
        this.setGtkjHystLoading_act(this.gtkjHystLoading); // 请求失败后，将loading窗关闭
      }
    },

    // 点击后画面 （城镇开发边界）
    async getRegionDataThree() {
      try {
        const temp = guihuaTableNames.find(
          (r) => r.layer_chinese_name === "城镇开发边界"
        );
        if (this.switchValue3 == true) {
          const result = await getXzRegion(this.isRegion, temp);
          const polylinedata = [];
          const polygondata = [];
          for (let index = 0; index < result.data.length; index++) {
            const item = result.data[index];
            let itemJson = JSON.parse(item);
            // console.log(
            //   itemJson.geometry.coordinates,
            //   "itemJson.geometry.coordinates"
            // );
            if (
              (!itemJson && !itemJson.geometry) ||
              !itemJson.geometry.coordinates
            ) {
              continue;
            }
            const r = parseInt(temp.hex.substr(1, 2), 16) / 255;
            const g = parseInt(temp.hex.substr(3, 2), 16) / 255;
            const b = parseInt(temp.hex.substr(5, 2), 16) / 255;
            const colorArray = [r, g, b, 0.6];
            const polygon = {
              id: "polygon_" + temp.layer_english_name + "_" + index,
              coordinates: itemJson.geometry.coordinates,
              // color: [
              //   0.2784313725490196,
              //   0.8117647058823529,
              //   0.0745098039215686,
              //   0.7,
              // ], //多边形的填充颜色
              color: colorArray, //多边形的填充颜色

              frameColor: [1, 1, 0, 0.8], //边框颜色
              frameThickness: 2, //边框厚度
              intensity: 1, //亮度
              // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
              style: 0,
              depthTest: false, //是否做深度检测
              //   coordinateType: 1,
            };
            polygondata.push(polygon);
            itemJson.geometry.coordinates.forEach((item) => {
              // console.log(item, "item");
              if (
                item instanceof Array &&
                item[0] instanceof Array &&
                item[0][0] instanceof Array
              ) {
                item.forEach((mon) => {
                  polylinedata.push({
                    id: "polyline_" + temp.layer_english_name + "_" + index,
                    coordinates: mon, //构成折线的坐标点数组
                    color: [1, 1, 1, 1], //折线颜色
                    style: 0, //折线样式 参考样式枚举：PolylineStyle
                    thickness: 5, //折线宽度
                    intensity: 1, //亮度
                    flowRate: 0.5, //流速
                    tiling: 0, //材质贴图平铺比例
                    shape: 0, //折线类型 0：直线， 1：曲线
                    depthTest: false, //是否做深度检测
                    coordinateType: 0,
                  });
                });
              } else {
                polylinedata.push({
                  id: "polyline_" + temp.layer_english_name + "_" + index,
                  coordinates: item, //构成折线的坐标点数组
                  color: [1, 1, 1, 1], //折线颜色
                  style: 0, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 5, //折线宽度
                  intensity: 1, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              }
            });
            // const polygon3d = {
            //   id: "polygon3d_" + temp.layer_english_name + "_" + index,
            //   coordinates: itemJson.geometry.coordinates,
            //   color: [1, 1, 1, 0.5], //颜色值
            //   height: 150, //3D多边形的高度
            //   intensity: 2.0, //亮度
            //   style: 2,
            // };
            // polygon3ddata.push(polygon3d);
          }

          temp["polygondata"] = polygondata;
          temp["polylinedata"] = polylinedata;

          // 调用一次性画3000条数据的方法

          await editMap(polygondata, 2);
          await editMap(polylinedata, 1);

          this.gtkjCzkfLoading = false;
          this.setGtkjCzkfLoading_act(this.gtkjCzkfLoading);
          // this.$store.dispatch(
          //   "Sjsx/setGtkjCzkfLoading_act",
          //   this.gtkjCzkfLoading
          // );

          // await window.__g.polyline.add(polylinedata);
          // await window.__g.polygon.add(polygondata);

          // await window.__g.polygon.focus(polygondata.map((r) => r.id));
        } else if (this.switchValue3 == false) {
          if (temp["polygondata"] && temp["polygondata"] instanceof Array) {
            // debugger;
            // window.__g.polygon.updateBegin();
            let polygondataIds = [];
            let polylineIds = [];

            temp["polygondata"].forEach((element) => {
              polygondataIds.push(element.id);
            });
            temp["polylinedata"].forEach((element) => {
              polylineIds.push(element.id);
            });
            await window.__g.polygon.delete(polygondataIds);
            await window.__g.polyline.delete(polylineIds);

            // window.__g.polygon.updateEnd();
            console.log("已经删除");
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error("服务器请求异常，图层加载失败！");
        this.switchValue3 = false; // 请求失败后，将switch框设置为false
        this.gtkjCzkfLoading = false;
        this.setGtkjCzkfLoading_act(this.gtkjCzkfLoading); // 请求失败后，将loading窗关闭
      }
    },

    // switch的改变(永久基本农田)
    async switchChange1(val) {
      console.log(val, "switch1改变");
      this.isdisabled = true;
      if (val) {
        if (parseFloat(this.gtkjghData.yjjbntRatio)) {
          this.gtkjJbntLoading = true;
          this.setGtkjJbntLoading_act(this.gtkjJbntLoading);
          await this.getRegionDataOne();
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue1 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataOne();
      }
      this.isdisabled = false;
    },
    // switch的改变(陆域生态保护红线)
    async switchChange2(val) {
      console.log(val, "switch2改变");
      this.isdisabled = true;
      if (val) {
        if (parseFloat(this.gtkjghData.shtbhhxRatio)) {
          this.gtkjLystLoading = true;
          this.setGtkjLystLoading_act(this.gtkjLystLoading);
          await this.getRegionDataTwo();
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue2 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataTwo();
      }
      // this.switchValue2 = val;
      this.isdisabled = false;
    },
    // switch的改变(城镇开发边界)
    async switchChange3(val) {
      console.log(val, "switch3改变");
      this.isdisabled = true;

      if (val) {
        if (parseFloat(this.gtkjghData.czhkfbjRatio)) {
          this.gtkjCzkfLoading = true;
          this.setGtkjCzkfLoading_act(this.gtkjCzkfLoading);
          // this.$store.dispatch(
          //   "Sjsx/setGtkjCzkfLoading_act",
          //   this.gtkjCzkfLoading
          // );
          await this.getRegionDataThree();
          // this.gtkjCzkfLoading = false;
          // this.$store.dispatch(
          //   "Sjsx/setGtkjCzkfLoading_act",
          //   this.gtkjCzkfLoading
          // );
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue3 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataThree();
      }
      // this.switchValue3 = val;
      this.isdisabled = false;
    },
    // switch的改变(海洋生态保护红线)
    async switchChange4(val) {
      console.log(val, "switch4改变");
      this.isdisabled = true;
      // this.switchValue4 = val;
      if (val) {
        if (parseFloat(this.gtkjghData.shtbhhxRatio)) {
          this.gtkjHystLoading = true;
          this.setGtkjHystLoading_act(this.gtkjHystLoading);
          // this.$store.dispatch(
          //   "Sjsx/setGtkjHystLoading_act",
          //   this.gtkjHystLoading
          // );
          await this.getRegionDataFour();
          // this.gtkjHystLoading = false;
          // this.$store.dispatch(
          //   "Sjsx/setGtkjCzkfLoading_act",
          //   this.gtkjHystLoading
          // );
        } else {
          this.$message.warning("选址不涉及，暂无图层");
          setTimeout(() => {
            this.switchValue4 = false;
          }, 300);
        }
      } else {
        await this.getRegionDataFour();
      }
      this.isdisabled = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.gtkjgh {
  margin-top: 25px;
  .gtkjgh_top {
    background: url("../../../../../assets/images/home/top.png");
    width: 440px;
    background-size: cover;
    .gtkjgh_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
    }
  }
  .gtkjgh_middle {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    margin-top: 10px;
    .gtkjgh_middle_title {
    }
    .gtkjgh_middle_button {
      margin-top: 8px;
      display: flex;
      justify-content: center;
      width: 420px;
      flex-wrap: wrap;
      .image_active {
        background: url("../../../../../assets/images/home/jianzhuBox.png");
        background-size: 100% 100%;
      }
      .gtkjgh_middle_button_image {
        width: 430px;
        height: 115px;
        margin-bottom: 15px;
        .gtkjgh_middle_content {
          width: 430px;
          height: 115px;
          background: linear-gradient(180deg, #1f3e72 0%, #112650 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-radius: 4px;
          cursor: pointer;
          margin-bottom: 15px;
          .gtkjgh_middle_content_top {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 21px;
            color: rgba(255, 255, 255, 0.85);
            // padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .gtkjgh_middle_content_bottom {
            padding-top: 8px;
            font-family: HuXiaoBo-NanShen;
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 19px;
            color: #83fae5;
            // padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .gtkjgh_middle_content_bottom_one {
              padding-top: 5px;
            }
            .gtkjgh_middle_content_bottom_two {
              padding-top: 10px;
            }
          }
        }
      }

      .gtkjgh_middle_button_content {
        .gtkjgh_middle_button_content_top {
          display: flex;
          align-items: center;
          padding-bottom: 3px;
          .gtkjgh_middle_button_title {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
